<template>
  <view class="pay-container">
    <!-- 顶部背景区域 -->
    <view class="top-bg-container">
      <!-- 导航栏 -->
      <view class="nav-bar" :style="{ height: navHeight + 'px', paddingTop: statusBarHeight + 'px' }">
        <view class="nav-content">
          <view class="nav-left" @click="goBack">
            <image src="/static/left_arrow.png" class="back-arrow" />
          </view>
          <view class="nav-title">支付中心</view>
          <view class="nav-right"></view>
        </view>
      </view>

      <!-- 用户信息卡片 -->
      <view class="user-card-container">
        
        <view class="user-card">
          <view class="user-info-section">
            <view class="user-avatar">
              <image class="avatar-img" :src="getAvatarUrl(userInfo.user_head)" />
            </view>
            <view class="user-details">
              <view class="user-name">{{ userInfo.nickname }}</view>
              <view class="payment-record" @click="goPaymentRecord">
                <text class="record-text">支付记录 ></text>
                <image src="/static/right_arrow_white.png" class="record-arrow" />
              </view>
            </view>
          </view>
          <view class="decoration-section">
            <view class="diamond-decoration">
              <image src="/static/diamond-icon.png" class="diamond-icon" />
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="content-area">
      <!-- VIP类型选择 -->
      <view class="vip-tabs-container">
        <view class="vip-tabs">
          <view class="tab-item" :class="{ 'active': activeTab === 'personal' }" @click="switchTab('personal')">
            <view class="tab-bg">
              <text class="tab-text">个人VIP</text>
            </view>
          </view>
          <view class="tab-item" :class="{ 'active': activeTab === 'enterprise' }" @click="switchTab('enterprise')">
            <view class="tab-bg">
              <text class="tab-text">企业VIP</text>
            </view>
          </view>
        </view>
      </view>

      <!-- VIP卡片列表 -->
      <view class="vip-cards-container" v-show="activeTab === 'personal'">
        <view class="vip-cards-list">
          <!-- 首次0月卡片 -->
          <view class="vip-card" :class="{ 'selected': selectedPlan === 'first' }" @click="selectVipPlan('first')">
            <view class="discount-tag">
              <text class="discount-text">特价</text>
            </view>
            <view class="card-content">
              <view class="plan-title">首次包月</view>
              <view class="price-section">
                <text class="currency">¥</text>
                <text class="price">99</text>
              </view>
              <view class="validity">有效期1个月</view>
            </view>
          </view>

          <!-- 包月卡片 -->
          <view class="vip-card" :class="{ 'selected': selectedPlan === 'monthly' }" @click="selectVipPlan('monthly')">
            <view class="card-content">
              <view class="plan-title">包月</view>
              <view class="price-section">
                <text class="currency">¥</text>
                <text class="price">199</text>
              </view>
              <view class="validity">有效期1个月</view>
            </view>
          </view>

          <!-- 包年卡片 -->
          <view class="vip-card" :class="{ 'selected': selectedPlan === 'yearly' }" @click="selectVipPlan('yearly')">
            <view class="card-content">
              <view class="plan-title">包年</view>
              <view class="price-section">
                <text class="currency">¥</text>
                <text class="price">1999</text>
              </view>
              <view class="validity">有效期1年</view>
            </view>
          </view>
        </view>
      </view>

      <!-- 企业VIP卡片列表 -->
      <view class="vip-cards-container" v-show="activeTab === 'enterprise'">
        <view class="vip-cards-list">
          <!-- 黄金年卡 -->
          <view class="vip-card" :class="{ 'selected': selectedPlan === 'gold' }" @click="selectVipPlan('gold')">
            <view class="card-content">
              <view class="plan-title">黄金年卡</view>
              <view class="price-section">
                <text class="currency">¥</text>
                <text class="price">1万</text>
              </view>
              <view class="validity">有效期1年</view>
              <view class="gift-info">赠送20个账号</view>
            </view>
          </view>

          <!-- 白金年卡 -->
          <view class="vip-card" :class="{ 'selected': selectedPlan === 'platinum' }"
            @click="selectVipPlan('platinum')">
            <view class="card-content">
              <view class="plan-title">白金年卡</view>
              <view class="price-section">
                <text class="currency">¥</text>
                <text class="price">2万</text>
              </view>
              <view class="validity">有效期1年</view>
              <view class="gift-info">赠送50个账号</view>
            </view>
          </view>

          <!-- 钻石年卡 -->
          <view class="vip-card" :class="{ 'selected': selectedPlan === 'diamond' }" @click="selectVipPlan('diamond')">
            <view class="card-content">
              <view class="plan-title">钻石年卡</view>
              <view class="price-section">
                <text class="currency">¥</text>
                <text class="price">3万</text>
              </view>
              <view class="validity">有效期1年</view>
              <view class="gift-info">赠送100个账号</view>
            </view>
          </view>
        </view>
      </view>

      <!-- 协议确认和购买按钮 -->
      <view class="purchase-section">
        <!-- 购买按钮 -->
        <view class="purchase-button" :class="{ 'disabled': !isAgreed }" @click="handlePurchase">
          <text class="purchase-text">确认协议并购买</text>
        </view>

        <!-- 协议确认 -->
        <view class="agreement-section">
          <view class="agreement-checkbox" @click="toggleAgreement">
            <image class="checkbox-icon" :src="isAgreed ? '/static/select-xy.png' : '/static/unselect-xy.png'" />
          </view>
          <view class="agreement-text">
            <text class="agreement-prefix">确认 </text>
            <text class="agreement-link" @click="openAgreement('service')">《会员服务协议》</text>
            <text class="agreement-link" @click="openAgreement('auto')">《自动续费协议》</text>
          </view>
        </view>

        <!-- 权限对比表格 -->
        <view class="comparison-table-section">
          <image class="comparison-table-image" src="/static/bottom-table.png" mode="widthFix" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      navHeight: '', //整体顶部导航栏的高度
      statusBarHeight: '', //状态栏高度
      userInfo: (() => {
        const userInfo = uni.getStorageSync("userInfo") || {};
        return userInfo.data ? userInfo.data : userInfo;
      })(),
      activeTab: 'personal', // 当前选中的tab，默认选中个人VIP
      selectedPlan: 'first', // 当前选中的套餐，默认选中首次包月
      isAgreed: false, // 是否同意协议
    }
  },
  computed: {

  },
  watch: {

  },
  onLoad() {
    let {
      statusBarHeight,
      system
    } = uni.getSystemInfoSync();
    this.statusBarHeight = statusBarHeight;
    this.navHeight = statusBarHeight + (system.indexOf("iOS") > -1 ? 44 : 48);

    // 获取用户信息
    const userInfo = uni.getStorageSync("userInfo") || {};
    this.userInfo = userInfo.data ? userInfo.data : userInfo;
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },

    // 获取头像URL
    getAvatarUrl(head) {
      if (!head) {
        return '/static/default_avatar.png'; // 默认头像
      }
      // 如果已经是完整url，直接返回
      if (/^https?:\/\//.test(head)) return head;
      // 防止多斜杠
      return 'https://tob.cycyai.com/' + head.replace(/^\/+/, '');
    },

    // 支付记录页面跳转
    goPaymentRecord() {
      console.log('跳转到支付记录页面');
      uni.navigateTo({
        url: '/minePages/paymentRecord'
      });
    },

    // 切换VIP类型tab
    switchTab(tabType) {
      this.activeTab = tabType;
      // 切换tab时设置对应的默认选中套餐
      if (tabType === 'personal') {
        this.selectedPlan = 'first'; // 个人VIP默认选中首次包月
      } else if (tabType === 'enterprise') {
        this.selectedPlan = 'gold'; // 企业VIP默认选中黄金年卡
      }
      console.log('切换到:', tabType === 'personal' ? '个人VIP' : '企业VIP');
    },

    // 选择VIP套餐
    selectVipPlan(planType) {
      this.selectedPlan = planType;
      const planNames = {
        // 个人VIP套餐
        'first': '首次包月套餐',
        'monthly': '包月套餐',
        'yearly': '包年套餐',
        // 企业VIP套餐
        'gold': '黄金年卡',
        'platinum': '白金年卡',
        'diamond': '钻石年卡'
      };
      console.log('选择了:', planNames[planType]);
      // 这里可以添加跳转到支付页面的逻辑
    },

    // 切换协议同意状态
    toggleAgreement() {
      this.isAgreed = !this.isAgreed;
      console.log('协议同意状态:', this.isAgreed);
    },

    // 打开协议页面
    openAgreement(type) {
      const agreementTypes = {
        'service': '会员服务协议',
        'auto': '自动续费协议'
      };
      console.log('打开协议:', agreementTypes[type]);
      // 跳转到协议页面
      uni.navigateTo({
        url: '/minePages/paymentAgreement?type=' + type
      });
    },

    // 处理购买
    handlePurchase() {
      if (!this.isAgreed) {
        uni.showToast({
          title: '请先同意相关协议',
          icon: 'none',
          duration: 2000
        });
        return;
      }

      const planNames = {
        // 个人VIP套餐
        'first': '首次包月套餐',
        'monthly': '包月套餐',
        'yearly': '包年套餐',
        // 企业VIP套餐
        'gold': '黄金年卡',
        'platinum': '白金年卡',
        'diamond': '钻石年卡'
      };

      console.log('开始购买:', planNames[this.selectedPlan]);
      // 这里可以添加跳转到支付页面的逻辑
    }
  }

}
</script>

<style lang="scss" scoped>
.pay-container {
  width: 100%;
  min-height: 100vh;
  background-color: #e4f0fe;
  position: relative;
}

.top-bg-container {
  position: relative;
  width: 100%;
  height: 580rpx;
  background-image: url('/static/top-bg.png');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  overflow: hidden;
}

// 导航栏样式
.nav-bar {
  position: relative;
  z-index: 10;
  width: 100%;
  display: flex;
  align-items: flex-end;
  box-sizing: border-box;
}

.nav-content {
  width: 100%;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32rpx;
  box-sizing: border-box;
}

.nav-left {
  display: flex;
  align-items: center;
  justify-content: center;
  // width: 88rpx;
  // height: 88rpx;
  // cursor: pointer;
}

.back-arrow {
  width: 40rpx;
  height: 40rpx;
}

.nav-title {
  flex: 1;
  text-align: center;
  font-size: 36rpx;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 1;
  margin-left: 18px;
}

.nav-right {
  width: 88rpx;
  height: 88rpx;
}

// 用户信息卡片容器
.user-card-container {
  position: absolute;
  left: 50%;
  top: 43%;
  transform: translate(-50%, -20%);
  width: calc(100% - 64rpx);
  max-width: 686rpx;
  z-index: 5;
}

.user-card {
  position: relative;
  width: 100%;
  height: 248rpx;
  background-image: url('/static/hg-card.png');
  background-size: 100% 248rpx;
  // background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 24rpx;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48rpx;
  box-sizing: border-box;
  // backdrop-filter: blur(10px);
  // -webkit-backdrop-filter: blur(10px);
}

.user-info-section {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  margin-top: 23px;
}

.user-avatar {
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 32rpx;
  background-color: rgba(255, 255, 255, 0.2);
  border: 3rpx solid rgba(255, 255, 255, 0.3);
}

.avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.user-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.user-name {
  font-size: 36rpx;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 1.2;
  margin-bottom: 12rpx;
  text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
}

.payment-record {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.record-text {
  font-size: 28rpx;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
  margin-right: 8rpx;
  text-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.2);
}

.record-arrow {
  width: 24rpx;
  height: 24rpx;
  opacity: 0.8;
}

// 装饰区域
.decoration-section {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.diamond-decoration {
  position: relative;
  width: 120rpx;
  height: 120rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.diamond-icon {
  width: 80rpx;
  height: 80rpx;
  filter: drop-shadow(0 4rpx 12rpx rgba(0, 150, 255, 0.4));
}

// 内容区域
.content-area {
  position: relative;
  z-index: 1;
  background-color: #e4f0fe;
  border-radius: 32rpx 32rpx 0 0;
  margin-top: -46px;
  min-height: calc(100vh - 548rpx);
  // padding: 48rpx 32rpx 64rpx;
  box-sizing: border-box;
}

// VIP类型选择tabs
.vip-tabs-container {
  width: 100%;
  margin-bottom: 48rpx;
}

.vip-tabs {
  display: flex;
  align-items: center;
  background-color: transparent;
  border-radius: 0;
  overflow: hidden;
}

.tab-item {
  flex: 1;
  position: relative;
  height: 91.6rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;

  // 未选中状态的背景
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('/static/unselect-b.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
  }

  // 企业VIP（第二个tab）未选中状态的背景
  &:last-child::before {
    background-image: url('/static/left-tab-bg.png');
  }

  // 选中状态的背景
  &.active::before {
    background-image: url('/static/select-b.png');
  }
}

.tab-bg {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tab-text {
  font-size: 32rpx;
  font-weight: 500;
  color: #FFFFFF;
  text-align: center;
  line-height: 1;
  transition: all 0.3s ease;
}

.tab-item.active .tab-text {
  color: #0C92FF;
  font-size: 38rpx;
  font-weight: 600;
}

// iOS和Android适配
/* #ifdef APP-PLUS */
.tab-item {
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}

/* #endif */

/* #ifdef H5 */
.tab-item:hover {
  opacity: 0.8;
}

/* #endif */

// VIP卡片列表样式
.vip-cards-container {
  width: 100%;
  padding: 0 32rpx;
  box-sizing: border-box;
}

.vip-cards-list {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20rpx;
}

.vip-card {
  position: relative;
  flex: 1;
  height: 267.18rpx;
  background: #FFFFFF;
  border-radius: 19rpx;
  border: 3rpx solid transparent;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24rpx 16rpx;
  box-sizing: border-box;

  &:hover {
    transform: translateY(-4rpx);
    box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.12);
  }

  &:active {
    transform: translateY(-2rpx);
  }

  // 选中状态样式
  &.selected {
    border: 2px solid #0C92FF;
    box-shadow: 0 4rpx 20rpx rgba(12, 146, 255, 0.15);

    &:hover {
      transform: translateY(-4rpx);
      box-shadow: 0 8rpx 30rpx rgba(12, 146, 255, 0.25);
    }
  }
}

// 特价标签
.discount-tag {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-left: 60rpx solid #FF6B6B;
  border-bottom: 60rpx solid transparent;
  z-index: 2;
}

.discount-text {
  position: absolute;
  top: -48rpx;
  left: -46rpx;
  color: #FFFFFF;
  font-size: 20rpx;
  font-weight: 600;
  transform: rotate(-45deg);
  white-space: nowrap;
}

// 卡片内容
.card-content {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.plan-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #333333;
  margin-bottom: 24rpx;
  line-height: 1.2;
}

.price-section {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-bottom: 20rpx;
}

.currency {
  font-size: 28rpx;
  font-weight: 600;
  color: #333333;
  margin-right: 4rpx;
}

.price {
  font-size: 61rpx;
  font-weight: 700;
  color: #333333;
  line-height: 1;
}

.validity {
  font-size: 27rpx;
  font-weight: 400;
  color: #999999;
  line-height: 1.2;
}

.gift-info {
  font-size: 31rpx;
  font-weight: 500;
  color: #0C92FF;
  margin-top: 8rpx;
  line-height: 1.2;
  text-align: center;
}

// 移动端适配
/* #ifdef APP-PLUS */
.vip-card {
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}

/* #endif */

// 响应式适配
@media screen and (max-width: 750rpx) {
  .vip-cards-list {
    gap: 16rpx;
  }

  .vip-card {
    padding: 20rpx 12rpx;
  }

  .plan-title {
    font-size: 26rpx;
  }

  .price {
    font-size: 48rpx;
  }

  .currency {
    font-size: 24rpx;
  }

  .validity {
    font-size: 22rpx;
  }

  .gift-info {
    font-size: 22rpx;
  }
}

// 购买部分样式
.purchase-section {
  width: 100%;
  padding: 48rpx 32rpx 32rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32rpx;
}

// 协议确认样式
.agreement-section {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16rpx;
}

.agreement-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.checkbox-icon {
  width: 32rpx;
  height: 32rpx;
}

.agreement-text {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  line-height: 1.4;
}

.agreement-prefix {
  font-size: 28rpx;
  font-weight: 400;
  color: #666666;
  margin-right: 8rpx;
}

.agreement-link {
  font-size: 28rpx;
  font-weight: 500;
  color: #0C92FF;
  margin-right: 8rpx;

  &:hover {
    opacity: 0.8;
  }
}

// 购买按钮样式
.purchase-button {
  width: 423.66rpx;
  height: 91.6rpx;
  background: #0C92FF;
  border-radius: 95rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;

  &:hover {
    background: #0A7EE8;
  }

  &:active {
    background: #086AC7;
    transform: scale(0.98);
  }

  // 禁用状态
  &.disabled {
    background: #CCCCCC;
    cursor: not-allowed;

    &:hover {
      background: #CCCCCC;
    }

    &:active {
      transform: none;
    }
  }
}

.purchase-text {
  font-size: 32rpx;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 1;
}

// 移动端适配
/* #ifdef APP-PLUS */
.agreement-checkbox,
.agreement-link,
.purchase-button {
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}

/* #endif */

// 响应式适配
@media screen and (max-width: 750rpx) {
  .purchase-section {
    padding: 40rpx 24rpx 24rpx;
    gap: 24rpx;
  }

  .agreement-section {
    gap: 12rpx;
  }

  .checkbox-icon {
    width: 28rpx;
    height: 28rpx;
  }

  .agreement-prefix,
  .agreement-link {
    font-size: 26rpx;
  }

  .purchase-button {
    width: 380rpx;
    height: 80rpx;
  }

  .purchase-text {
    font-size: 28rpx;
  }
}

// 权限对比表格样式
.comparison-table-section {
  width: 100vw;
  box-sizing: border-box;
  border-radius: 16rpx;
  margin-top: 32rpx;
}

.comparison-table-image {
  width: 100vw;
  display: block;
}



</style>